<template>
    <div class="upload">
        <el-button type="primary" @click="trigupload">上传文件</el-button>
        <el-input type="file" v-model="val" ref="file" style="display: none" @change="upload"></el-input>
        <div style="width: 200px">
            <img :src="img" width="100%">
        </div>
    </div>
</template>

<script>
    export default {
        name: 'upload',
        data(){
            return{
                val:null,
                img:'',
                file:''
            }
        },
        methods:{
            trigupload(){
                this.$refs.file.$el.querySelector('input[type=file]').click()
            },
            upload(){
                 this.file = this.$refs.file.$el.querySelector('input[type=file]').files[0];
                let read = new FileReader();
                read.onload = (e)=>{
                    this.img = e.target.result
                    this.val = null
                }
                read.readAsDataURL(this.file)
            }
        }
    };
</script>

<style scoped>

</style>